<form name="form" ng-init="vm.init();refresh();" ng-submit="vm.match(form.$valid)" novalidate>
  <div class="row x-page-header">
    <div class="col-md-12">
      <div class="x-page-title">SQL参数匹配</div>
      <div class="pull-right">
        <button class="btn btn-primary" type="submit">匹配参数</button>
        <button id="copy" class="btn btn-success" type="button" data-clipboard-action="copy"
            ng-disabled="vm.code == ''">复制</button>
        <button class="btn btn-danger" type="reset" ng-click="vm.reset()">重置</button>
      </div>
    </div>
  </div>
  <div class="row x-page-body">
    <div class="col-md-7">
      <fieldset>
        <legend>SQL与参数<font color="green">（适应于MyBatis日志的SQL参数匹配）</font></legend>
        <div class="x-page-scope">
          <div class="form-group">
            <label class="control-label">Prepared SQL：</label>
            <textarea class="form-control" rows="15" name="preparedSql" ng-model="vm.preparedSql" autofocus required
                ng-class="{'x-invalid': form.$submitted && form.preparedSql.$invalid}"></textarea>
              <p class="text-danger" ng-show="form.$submitted && form.preparedSql.$error.required">SQL不能为空</p>
          </div>
          <div class="form-group">
            <label class="control-label">参数：</label>
            <textarea class="form-control" rows="10" name="parameters" ng-model="vm.parameters" required
                ng-class="{'x-invalid': form.$submitted && form.parameters.$invalid}"></textarea>
              <p class="text-danger" ng-show="form.$submitted && form.parameters.$error.required">参数不能为空</p>
          </div>
        </div>
      </fieldset>
    </div>
    <div class="col-md-5">
      <fieldset>
        <legend>匹配结果</legend>
        <div class="x-page-scope">
          <div class="x-editor">
            <pre id="sql-viewer"></pre>
          </div>
        </div>
      </fieldset>
    </div>
  </div>
</form>
